<!DOCTYPE html>
<html lang="${lang,escape}">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
    <meta name="description" content="${AppName!}">
    <title>${AppName!}</title>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="${base!}/assets/platform/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${base!}/assets/platform/plugins/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${base!}/assets/platform/fonts/themify-icons.css">
    <link rel="stylesheet" href="${base!}/assets/platform/fonts/font-awesome.min.css">
    <link rel="stylesheet" href="${base!}/assets/platform/css/common.css">
    <link rel="stylesheet" href="${base!}/assets/platform/css/main.css">
    <link rel="stylesheet" href="${base!}/assets/platform/css/elmain.css">
    <link rel="stylesheet" href="${base!}/assets/platform/css/panel.css">
    <!-- import Vue before Element -->
    <script src="${base!}/assets/platform/plugins/vue/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="${base!}/assets/platform/plugins/element-ui/lib/index.js"></script>
    <script src="${base!}/assets/platform/plugins/jquery/jquery-1.11.1.min.js"></script>
    <script src="${base!}/assets/platform/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!-- pjax是异步加载html片段的工具,模拟前端路由机制 -->
    <script src="${base!}/assets/platform/plugins/pjax/jquery.pjax.js"></script>
    <script src="${base!}/assets/platform/plugins/bootstrap/js/bootstrap.js"></script>
    <!-- Array数组增加findIndex等方法,TreeTable用得到,兼容IE8 -->
    <script src="${base!}/assets/platform/plugins/polyfill/polyfill.js"></script>
    <!-- 时间日期处理工具类 -->
    <script src="${base!}/assets/platform/plugins/moment/moment.min.js"></script>
    <!-- 浏览器通知 -->
    <script src="${base!}/assets/platform/plugins/push/push.min.js"></script>
    <script src="${base!}/assets/platform/js/main.js"></script>
    <script src="${base!}/assets/platform/js/offscreen.js"></script>
    <!--# if(@shiro.getPrincipalProperty('loginTheme')!=null){ #-->
    <link rel="stylesheet" href="${base!}/assets/platform/css/skins/${@shiro.getPrincipalProperty('loginTheme')}"
          id="skin">
    <!--# }else{ #-->
    <link rel="stylesheet" href="${base!}/assets/platform/css/skins/palette.css" id="skin">
    <!--# } #-->
    <!--#
       var isLeftMenu = false;
       if(@shiro.getPrincipalProperty('menuTheme') == "top"){
           isLeftMenu = false;
       }else if(@shiro.getPrincipalProperty('menuTheme') == "left"){
           isLeftMenu = true;
       }
   #-->
    <script type="text/javascript">
        var base = "${base!}";
        var loginPjax = "${@shiro.getPrincipalProperty('loginPjax')}";
        var isLeftMenu = "${isLeftMenu!}";
    </script>
</head>
<body style="background-color: #ffffff">
<div id="app"  v-cloak style="margin-left: 20px;">
    <el-form :model="formData"  size="mini" label-width="130px" >
        <el-collapse v-model="activeNames" >
            <el-collapse-item title="标准信息" name="1">
                <el-row :span="24" :gutter="20">
                    <el-col :span="8">
                        <el-form-item prop="productName" label="产品名称">
                            {{formData.productName}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="productTypeCode" label="产品类型">
                            {{getDict(formData.productTypeCode,allMap.yplxMap)}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="inspectionStandard" label="检验依据标准">
                            {{formData.inspectionStandard}}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-collapse-item>
            <el-collapse-item title="检验项目" name="2">
                <el-table :data="formData.inspectionItems"
                          height="520"
                          max-height="800"
                          border size="small"
                          header-align="center"
                          style="width: 100%"
                >
                    <el-table-column  prop="inspectionItemName" label="检验项目" min-width="120px;" header-align="center" align="center" show-overflow-tooltip>
                        <template slot-scope="scope" >{{scope.row.inspectionItemName}}</template>
                    </el-table-column>
                    <el-table-column  prop="inspectionItemOrder" label="附页序号" min-width="120px;" header-align="center" align="center" show-overflow-tooltip>
                        <template slot-scope="scope" >{{scope.row.inspectionItemOrder}}</template>
                    </el-table-column>
                    <el-table-column  prop="standardTermsNumber" label="条款号" min-width="70px;" header-align="center" align="center" show-overflow-tooltip>
                        <template slot-scope="scope" >{{scope.row.standardTermsNumber}}</template>
                    </el-table-column>
                    <el-table-column  prop="specification" label="规格型号" min-width="100px;" header-align="center" align="center" show-overflow-tooltip>
                        <template slot-scope="scope" >{{scope.row.specification}}</template>
                    </el-table-column>
                    <el-table-column  prop="sampleCount" label="样品数量" min-width="100px;" header-align="center" align="center" show-overflow-tooltip>
                        <template slot-scope="scope" >{{scope.row.sampleCount}}</template>
                    </el-table-column>

                    <el-table-column  prop="inspectionPrice" label="检验费用" min-width="100px;" header-align="center" align="center" show-overflow-tooltip>
                        <template slot-scope="scope" >{{scope.row.inspectionPrice}}</template>
                    </el-table-column>
                    <el-table-column  prop="chargeStandardName" label="收费标准" min-width="120px;" header-align="center" align="center" show-overflow-tooltip>
                        <template slot-scope="scope" >{{scope.row.chargeStandardName}}</template>
                    </el-table-column>
                    <el-table-column  prop="countUnit" label="计量单位" min-width="100px;" header-align="center" align="center" show-overflow-tooltip>
                        <template slot-scope="scope" >{{scope.row.countUnit}}</template>
                    </el-table-column>

                    <el-table-column  prop="inspectionCycle" label="检验周期" min-width="100px;" header-align="center" align="center" show-overflow-tooltip>
                        <template slot-scope="scope" >{{scope.row.inspectionCycle}}</template>
                    </el-table-column>
                    <el-table-column  prop="environmentStandard" label="环境要求" min-width="120px;" header-align="center" align="center" show-overflow-tooltip>
                        <template slot-scope="scope" >{{scope.row.environmentStandard}}</template>
                    </el-table-column>
                    <el-table-column  prop="equipmentName" label="实验设备" min-width="120px;" header-align="center" align="center" show-overflow-tooltip>
                        <template slot-scope="scope" >{{scope.row.equipmentName}}</template>
                    </el-table-column>
                    <el-table-column  prop="equipmentName" label="备注" min-width="120px;" header-align="center" align="center" show-overflow-tooltip>
                        <template slot-scope="scope" >{{scope.row.remark}}</template>
                    </el-table-column>
                </el-table>
            <!--    <el-scrollbar id="itemScrollbar" style="height: 100%;">
                </el-scrollbar>-->
            </el-collapse-item>
        </el-collapse>
    </el-form>
</div>
</body>
<style scoped>
    .el-table--border th.gutter:last-of-type {
        display: block !important;
        width: 17px !important;
    }
</style>
<script>
    var allMap = {yplxMap:${yplxMap}};
    new Vue({
        el:"#app",
        data:function () {
            return{
                allMap:allMap,
                activeNames: ['1','2'],
                standardId:"${standardId!}",
                formData:${object}
            }
        },
        methods:{
            getDict: function (val, map) {
                if (val != null && val != undefined && val != "" && map != null && map != undefined) {
                    var str = val.split(",");
                    var strname = "";
                    for (var a = 0; a < str.length; a++) {
                        strname += map[str[a]];
                        if (strname == null) {
                            alert(1)
                        }
                        if (a < (str.length - 1)) {
                            strname += "/";
                        }
                    }
                    return strname;
                }
                return "";
            },
            // viewData: function () {//加载展示数据
            //     var self = this;
            //     sublime.showLoadingbar();//显示loading
            //     $.post(base + "/platform/bus/ins_standard/view/data/", self.standardId, function (data) {
            //         sublime.closeLoadingbar();//关闭loading
            //         if (data.code == 0) {
            //             self.formData = data.data;
            //         } else {
            //             self.$message({
            //                 message: data.msg,
            //                 type: 'error'
            //             });
            //         }
            //     }, "json");
            // },
            // created: function () {
            //     this.viewData();
            // },
            // mounted:function () {
            //     this.viewData();
            // }
        },
    })
</script>
